<template>
  <div>
    <table border="1px">
      <tr>
        <td>id</td>
        <td>姓名</td>
        <td>生日</td>
        <td>简介</td>
        <td>操作</td>
      </tr>
      <tr v-for="(user,index) in users" :key="index">
        <td>{{ user.id }}</td>
        <td>{{ user.username }}</td>
        <td>{{ user.bir }}</td>
        <td>{{ user.content }}</td>
        <td>
          <a href="javascript:;" @click="delete_note(index)">删除</a> | <router-link :to="`/userdetail/${user.id}/${user.bir}/${user.content}/${user.username}`">查看信息</router-link>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {
      users: [
        {"id": 1, "username": "小哈", "bir": "2011-1-1", content: "我喜欢唱"},
        {"id": 2, "username": "小九", "bir": "2012-3-1", content: "我喜欢跳"},
        {"id": 3, "username": "小刘", "bir": "2012-2-1", content: "我喜欢rap"},
        {"id": 4, "username": "小王", "bir": "2013-5-1", content: "我喜欢打篮球"},
      ]
    }
  },
  methods:{
    delete_note(id){
      console.log(id)
      this.users.splice(id,1)
    }
  }
}
</script>

<style scoped>

</style>
